import React, {Component} from 'react'
import {Button, Form, Icon, Input, Radio, Tooltip} from 'antd'
import {connect} from 'react-redux'
import {formItemLayout, inputStyle, mdLayout, radioStyle} from '../../constant/constant-style'
import {withRouter} from 'react-router-dom'
import SelectTags from '../common/select-tags'
import {TwsReactMarkdownEditor} from 'tws-antd'
import {getUploadUrl} from '../../constant/upload-url'
import {FormattedMessage} from 'react-intl'
import {addSurveyQuiz} from "../../actions/survey-quiz";

const RadioGroup = Radio.Group
const FormItem = Form.Item
const operationStyle = {
  fontSize: '20px',
  marginLeft: '10px',
  cursor: 'pointer',

}
class AddSurveyQuizBody extends Component {
    state = {
      tags: [],
      description: '',
      choices: ['', '', '', ''],
    }

  optionOnChange =(index, e) =>{
    const {choices} = this.state
    const {value} = e.target

    choices[index] = value
    this.setState({choices})
  }


  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err) => {
      if (!err) {
        this.props.addSurveyQuiz({...this.state})
      }
    })
  }
  handleDeleteSelectItem =index=> {
    let {choices} = this.state
    choices = choices.filter((choice, idx) => index !== idx)
    this.setState({choices})
  }

  handleAddSelectItem =() =>{
    let {choices} = this.state
    choices.push('')
    this.setState({choices})
  }
  render () {
    const {getFieldDecorator} = this.props.form
    const {tags, description, choices} = this.state
    const { settings} = this.props

    return <Form onSubmit={this.handleSubmit}>
      <p>
        <a onClick={() => window.history.back()}>
          <Icon type='arrow-left' /><FormattedMessage id='返回上一页' /></a>
      </p>

      <FormItem label={<FormattedMessage id='题目描述' />}{...mdLayout}>
        {getFieldDecorator('description',
          {rules: [{required: true, message: <FormattedMessage id='请填写题目描述' />}]})(
            <TwsReactMarkdownEditor
              action={getUploadUrl(settings.appContextPath)}
              value={description}
              onChange={description => this.setState({description})} />)}
      </FormItem>
      <FormItem {...formItemLayout}
                label={<FormattedMessage id='选项' />} required>
        <RadioGroup>
          {choices.map((option, index) => {
            return (
              <p><Radio style={radioStyle}  key={index} disabled>
                <Input style={inputStyle}
                       value={option}
                       onChange={(e)=>this.optionOnChange(index,e)}
                />
                {index > 1
                  ? <Tooltip title={<FormattedMessage id='删除选项' />}>
                    <Icon type='minus-circle-o' style={operationStyle} onClick={()=>this.handleDeleteSelectItem(index)} />
                  </Tooltip>
                  : ''}
              </Radio>
              </p>
            )
          })}
          <Tooltip title={<FormattedMessage id='添加一个选项' />}>
              <Icon  type='plus-circle-o' style={operationStyle} onClick={this.handleAddSelectItem} />
            </Tooltip>
        </RadioGroup>


      </FormItem>

      <SelectTags
        addTags={(tags) => this.setState({tags})}
        currentTags={tags} />
      <FormItem
        wrapperCol={{offset: 9}}
      >
        <Button type='primary' htmlType='submit'>
          <FormattedMessage id='添加'/>
        </Button>
      </FormItem>

    </Form>
  }
}

const mapStateToProps = ({surveyQuiz, settings}) => ({
  settings,
  surveyQuiz,
})

const mapDispatchToProps = dispatch => ({
  addSurveyQuiz: (quiz) => dispatch(addSurveyQuiz(quiz))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(AddSurveyQuizBody)))
